<template>
  <div >
    <div v-if="tabs && tabs.items" class="page-menu-tabs">
          <a-tabs :tabBarStyle="{margin: 0}" @change="tabs.callback" :activeKey="tabs.active()">
            <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key">
            </a-tab-pane>
          </a-tabs>
      </div>
      <a-card :bordered="false" class="search-content">
        <router-view />
      </a-card>
  </div>
</template>

<script>
import PageLayout from '@/components/page/PageLayout'
  export default {
    name: "messageIndex",
    components: { PageLayout },
    data () {
      return {
        menuData: [
          {
            key: '/earlyWarning/messageConfigure/settings',
            name: "消息设置",
          },
          {
            key: '/earlyWarning/messageConfigure/record',
            name: "消息记录",
          },
        ],
        tabs: {
          items: [
            {
              key: '1',
              title: '消息设置'
            },
            {
              key: '2',
              title: '消息记录'
            },
          ],
          active: () => {
            switch (this.$route.path) {
              case '/earlyWarning/messageConfigure/settings':
                return '1'
              case '/earlyWarning/messageConfigure/record':
                return '2'
              default:
                return '1'
            }
          },
          callback: (key) => {
            switch (key) {
              case '1':
                this.$router.push('/earlyWarning/messageConfigure/settings')
                break
              case '2':
                this.$router.push('/earlyWarning/messageConfigure/record')
                break
            }
          }
        },
        search: true
      }
    },
    computed: {
      title () {
        return this.$route.meta.title
      }
    },
    methods: {
    }
  }
</script>

<style lang="less" scoped>
  .search-head{
    background-color: #fff;
    margin: -25px -24px -24px;
    .search-input{
      text-align: center;
      margin-bottom: 16px;
    }
  }
  .search-content{
    padding: 24px;
    margin-top:12px;
    background: #fff;
    min-height: 400px;
  }
  .page-menu-tabs {
    // padding: 24px;
    padding: 24px 24px 0;
    background: #fff;
    border-radius: 2px;
    
  }
</style>